let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
  // 生产和开发都需要 hash
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '../', 'dist'),
    publicPath: '/'// 请求资源的时候 就直接从根路径找 就不会受路由的影响
  },

  //loader顺序 : 从后往前  css-loader: 打包css的 'style-loader' : 把打包后的css 插入到head里面
  // babel :

  // base
  resolve: { // 解决某些问题
    extensions: [ // 后缀
      '.js',
      '.jsx',
      '.css',
      '.scss',
      '.ts',
      '.json',
    ],
    alias: {
      '@': path.join(__dirname, '../', 'src'),
      'react-dom': '@hot-loader/react-dom'
    }
  },

  // base
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [{
          loader: 'babel-loader', options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: [
              '@babel/plugin-transform-runtime'
            ]
          }
        }],
        include: path.join(__dirname, '../', 'src'),
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [{loader: MiniCssExtractPlugin.loader, options: {}}, 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|webp|jpeg|bmp|ttf|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            esModule: false
          }
        }]
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css'// 清缓存
    }),
    new CopyPlugin(
      {
        'patterns': [
          {
            from: path.resolve(__dirname, '../', './static')
          }
        ]
      }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../', './index.html'),
      filename: 'index.html',
      minify: {
        removeAttributeQuotes: true,// 双引号
        collapseWhitespace: true//去除空格
      }
    })
  ]
};
